<!-- 公告 -->
<template>
	<view class="h-[75rpx] px-3 flex items-center gap-4 bg-[#F9F9F9] rounded-xl">
		<!-- left -->
		<view class="flex gap-1 items-center text-primary">
			<uni-icons type="sound-filled" size="20" color="theme(colors.primary)" />
			<text>公告</text>
		</view>
		<!-- content -->
		<swiper class="h-full flex-1 text-[#6F6F6F]" circular vertical autoplay :interval="3000" :duration="1000">
			<swiper-item v-for="item in messageList" :key="item.id" class="flex items-center">
				<view class="whitespace-nowrap text-ellipsis overflow-hidden" @click="toDetail">{{ item.message }}</view>
			</swiper-item>
		</swiper>
		<!-- right -->
		<uni-icons type="right" size="18" />
	</view>
</template>

<script setup>
	import { ref } from 'vue'

	const messageList = ref([
		{ id: '1', message: 'vue3 + tailwindcss' },
		{ id: '2', message: '学习学习学习学习学习学习学习学习学习学习学习' }
	])
	function toDetail() {
		uni.navigateTo({
			url: '/pages/announcementDetail/index'
		})
	}
</script>
